<template>
	<div>
		<div class="user-info">
			<div class="user-avatar">
				<van-uploader upload-icon="photograph" />
			</div>
			<div class="user-info-content">
				<div class="user-name">Hello World</div>
				<div class="user-integral">
					<div class="user-integral-item">
						<span>书币</span>
						<legend>2000</legend>
					</div>
					<div class="user-integral-item">
						<span>会员有效期</span>
						<legend>2020-12-31</legend>
					</div>
				</div>
			</div>
		</div>

		<van-grid class="user-menu" :border="false">
			<van-grid-item v-for="grid in grids" :key="grid">
				<div class="grid-icon" :style="grid.style">
					<van-icon :name="grid.icon" />
				</div>
				<span>{{ grid.title }}</span>
			</van-grid-item>
		</van-grid>

		<div class="user-banner">
			<img src="https://via.placeholder.com/375x90" />
		</div>

		<div class="user-history">
			<div class="index-block">
				<div class="block-header">
					<div class="block-title">最近观看</div>
				</div>
				<div class="swiper-container scroll-list">
					<div class="swiper-wrapper">
						<div class="swiper-slide" v-for="i in 5" :key="i">
							<div class="list-item">
								<div class="item-thumb">
									<img src="https://via.placeholder.com/240x320" />
								</div>
								<div class="item-title">123</div>
							</div>
						</div>
					</div>
					<div class="swiper-pagination"></div>
				</div>
			</div>
		</div>

		<div class="user-list">
			<van-cell-group :title="group.title" v-for="(group, index) in groups" :key="index">
				<van-cell
					:title="cell.title"
					:icon="cell.icon"
					v-for="(cell, item) in group.cells"
					:key="item"
					is-link
				/>
			</van-cell-group>
		</div>
	</div>
</template>

<script>
import Swiper from "swiper";

export default {
	data() {
		return {
			grids: [
				{
					title: "我的书架",
					icon: "column",
					style: { backgroundColor: "#ed2f85" }
				},
				{
					title: "阅读记录",
					icon: "clock",
					style: { backgroundColor: "#E251FE" }
				},
				{
					title: "我的收藏",
					icon: "like",
					style: { backgroundColor: "#7D65FD" }
				},
				{
					title: "缓存文件",
					icon: "descending",
					style: { backgroundColor: "#6598FE" }
				}
			],
			groups: [
				{
					title: "会员专区",
					cells: [
						{ title: "充值中心", icon: "vip-card" },
						{ title: "消费记录", icon: "balance-list" }
					]
				},
				{
					title: "帐号设置",
					cells: [
						{ title: "安全设置", icon: "youzan-shield" },
						{ title: "联系客服", icon: "service" }
					]
				},
				{
					title: "系统设置",
					cells: [
						{ title: "自动订阅", icon: "award" },
						{ title: "系统设置", icon: "setting" },
						{ title: "退出登录", icon: "share" }
					]
				}
			]
		};
	},
	mounted() {
		new Swiper(".scroll-list", {
			slidesOffsetBefore: 24,
			slidesOffsetAfter: 24,
			slidesPerView: 3,
			spaceBetween: 16
		});
	}
};
</script>
